<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传播数学的魅力</title>
    <script src="/marked.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f0f9ff;
            color: #334155;
        }
        .container {
            display: flex;
            min-height: 100vh;
            padding: 1rem;
            gap: 2rem;
        }
        .left-panel {
            flex: 1;
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            max-width: 400px;
        }
        .right-panel {
            flex: 2;
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }
        select, textarea {
            width: 100%;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 0.5rem;
            background-color: #f8fafc;
        }
        select:focus, textarea:focus {
            outline: none;
            border-color: #60a5fa;
            box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
        }
        button {
            width: 100%;
            padding: 0.75rem;
            background-color: #3b82f6;  /* 更深的蓝色背景 */
            color: white;  /* 白色文字 */
            border: 1px solid #3b82f6;  /* 边框颜色与背景一致 */
            border-radius: 0.5rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #2563eb;  /* 悬停时显示更深的蓝色背景 */
            color: white;  /* 悬停时文字保持白色 */
            border-color: #2563eb;  /* 悬停时边框颜色也变为更深的蓝色 */
        }
        .loading {
            display: none;
            text-align: center;
            padding: 1rem;
        }
        .answer-container {
            padding: 1rem;
        }
        .answer-container h1 { font-size: 2em; margin-bottom: 0.5em; }
        .answer-container h2 { font-size: 1.5em; margin-bottom: 0.5em; }
        .answer-container h3 { font-size: 1.17em; margin-bottom: 0.5em; }
        .answer-container p { margin-bottom: 1em; }
        .answer-container ul, .answer-container ol { margin-left: 2em; margin-bottom: 1em; }
        .answer-container code { background-color: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25em; }
        .answer-container pre { background-color: #f3f4f6; padding: 1em; border-radius: 0.5em; overflow-x: auto; margin-bottom: 1em; }
        .answer-container blockquote { border-left: 4px solid #e5e7eb; padding-left: 1em; margin-left: 0; margin-bottom: 1em; }
        .preview-container { padding: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; margin-top: 1rem; }
        .hidden { display: none; }
        .preview-toggle { margin-top: 1rem; padding: 0.5rem 1rem; background-color: #4b5563; color: white; border-radius: 0.25rem; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-panel">
            <h1 class="text-2xl font-bold mb-6 text-center">传播数学的魅力</h1>
            <div class="mb-6 text-sm text-gray-600 bg-gray-50 p-3 rounded-lg border border-gray-200">
                <h2 class="font-medium text-gray-800 mb-2">使用说明：</h2>
                <ol class="list-decimal pl-5 space-y-1">
                    <li>选择学段（小学、初中、高中或大学）</li>
                    <li>选择对应年级、章节、知识点</li>
                    <li>输入您的数学问题（可选择上传图片）</li>
                    <li>点击"提交问题"按钮获取解答</li>
                </ol>
                <p class="mt-2 text-xs">提示：选择越精确，解答越准确。问题描述应尽量清晰具体。上传图片可帮助系统更好理解复杂问题。</p>
            </div>
            <form id="questionForm">
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">学段</label>
                    <select id="level1" name="level1">
                        <option value="">请选择学段</option>
                        <option value="primary">小学</option>
                        <option value="junior">初中</option>
                        <option value="senior">高中</option>
                        <option value="college">大学</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">年级</label>
                    <select id="level2" name="level2" disabled>
                        <option value="">请先选择学段</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">章节</label>
                    <select id="level4" name="level4" disabled>
                        <option value="">请先选择年级</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">知识点</label>
                    <select id="level5" name="level5" disabled>
                        <option value="">请先选择章节</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">问题描述</label>
                    <div class="flex">
                        <div class="mr-2">
                            <label for="imageUpload" class="cursor-pointer block p-2 bg-gray-100 hover:bg-gray-200 rounded border border-gray-300 text-center">
                                <i class="fas fa-image"></i>
                            </label>
                            <input type="file" id="imageUpload" accept="image/*" class="hidden" />
                        </div>
                        <textarea id="question" name="question" rows="4" placeholder="请输入您的问题..." class="flex-grow"></textarea>
                    </div>
                    <button type="submit" class="submit-btn">提交问题</button>
                    <div id="imagePreview" class="mt-2 hidden">
                        <div class="relative inline-block">
                            <img id="previewImg" class="max-h-32 max-w-full rounded border border-gray-300" />
                            <button id="removeImage" class="absolute top-0 right-0 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="right-panel">
            <div class="loading">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
                <p class="mt-2">正在思考中...</p>
            </div>
            <div id="answerContainer" class="answer-container">
                <h1 class="text-2xl font-bold mb-4 text-center">八步解题法</h1>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                        <h2 class="text-lg font-semibold text-blue-700 mb-2">第一步：读题，也叫审题</h2>
                        <p class="text-gray-700">仔细阅读题目，理解问题要求和条件。</p>
                    </div>
                    <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                        <h2 class="text-lg font-semibold text-green-700 mb-2">第二步：列出所有的已知条件</h2>
                        <p class="text-gray-700">整理题目中给出的所有信息和条件。</p>
                    </div>
                    <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                        <h2 class="text-lg font-semibold text-yellow-700 mb-2">第三步：评估条件</h2>
                        <p class="text-gray-700">分析已知条件是否足够解题，是否有多余信息。</p>
                    </div>
                    <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                        <h2 class="text-lg font-semibold text-purple-700 mb-2">第四步：思考题目背后的知识点</h2>
                        <p class="text-gray-700">确定解题需要用到的数学概念和公式。</p>
                    </div>
                    <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                        <h2 class="text-lg font-semibold text-red-700 mb-2">第五步：思考多种解题思路</h2>
                        <p class="text-gray-700">尝试不同的解题方法，选择最合适的一种。</p>
                    </div>
                    <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-200">
                        <h2 class="text-lg font-semibold text-indigo-700 mb-2">第六步：开始解题</h2>
                        <p class="text-gray-700">按照选定的方法，一步步进行计算和推导。</p>
                    </div>
                    <div class="bg-pink-50 p-4 rounded-lg border border-pink-200">
                        <h2 class="text-lg font-semibold text-pink-700 mb-2">第七步：遇到困难及时换思路</h2>
                        <p class="text-gray-700">如果解题过程遇到障碍，尝试其他方法。</p>
                    </div>
                    <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                        <h2 class="text-lg font-semibold text-teal-700 mb-2">第八步：不被多余条件影响解题</h2>
                        <p class="text-gray-700">专注于解题必要的条件，忽略无关信息。</p>
                    </div>
                </div>
                <div class="mt-6 text-center text-gray-500">
                    <p>请在左侧选择学段、年级、章节和知识点，并输入您的问题</p>
                </div>
            </div>
            <div id="previewContainer" class="preview-container hidden">
                <div id="triangle-plot"></div>
            </div>
        </div>
    </div>

    <script>
        // 级联选择数据
        const cascadeData = {
            primary: {
                '一年级': {
                    '数字王国': [
                        '20以内的数的认识', '20以内的加减法', '简单的应用题',
                        '100以内数的认识', '整十数的加减法', '认识人民币'
                    ],
                    '形状世界': [
                        '立体图形的认识', '平面图形的认识', '上下左右位置',
                        '长度单位认识', '简单图形分类'
                    ]
                },
                '二年级': {
                    '计算乐园': [
                        '100以内的加减法', '表内乘法', '简单除法',
                        '整百数的认识', '时间的认识', '人民币的换算'
                    ],
                    '几何探索': [
                        '角的认识', '平面图形的边和角', '图形的拼组',
                        '厘米和米的认识', '简单的测量'
                    ]
                },
                '三年级': {
                    '数学基础': [
                        '万以内数的认识', '万以内的加减法', '表内除法',
                        '分数的初步认识', '小数的初步认识'
                    ],
                    '图形空间': [
                        '平行与垂直', '周长的概念', '长方形和正方形的周长',
                        '面积的初步认识'
                    ]
                },
                '四年级': {
                    '数字游戏': [
                        '万以上数的认识', '四则运算', '简单的小数加减',
                        '分数的基本性质', '分数的大小比较'
                    ],
                    '测量大师': [
                        '角度的测量', '三角形的认识', '平行四边形',
                        '面积的计算', '数学日记'
                    ]
                },
                '五年级': {
                    '数字王国': [
                        '小数的性质', '小数的四则运算', '分数加减法',
                        '可能性的大小', '百分数的认识'
                    ],
                    '形状世界': [
                        '三角形的面积', '梯形的面积', '扇形的认识',
                        '体积和容积的认识'
                    ]
                },
                '六年级': {
                    '计算乐园': [
                        '分数乘除法', '比的理解', '比例的应用',
                        '百分数的应用', '整数指数幂'
                    ],
                    '几何探索': [
                        '圆的理解', '圆的周长和面积', '圆柱和圆锥',
                        '比例尺的应用', '数据统计'
                    ]
                }
            },
            junior: {
                '初一': {
                    '数与式': [
                        '有理数的认识', '有理数运算', '整式的加减',
                        '一元一次方程', '数据的收集与整理'
                    ],
                    '图形与几何': [
                        '几何图形初步', '角与平行线', '三角形的基本性质',
                        '轴对称图形', '图形的初步认识'
                    ]
                },
                '初二': {
                    '代数': [
                        '整式的乘除', '因式分解', '分式',
                        '二元一次方程组', '一次函数'
                    ],
                    '几何': [
                        '三角形的证明', '全等三角形', '四边形',
                        '平行四边形', '矩形、菱形、正方形'
                    ]
                },
                '初三': {
                    '数学': [
                        '二次函数', '一元二次方程', '二次根式',
                        '勾股定理', '相似图形', '圆'
                    ],
                    '统计与概率': [
                        '统计的基本步骤', '频数与频率', '概率的意义',
                        '简单事件的概率'
                    ]
                }
                },
                senior: {
                    '高一': {
                        '集合与函数': [
                            '集合的概念', '集合的运算', '函数的概念',
                            '函数的性质', '指数函数', '对数函数'
                        ],
                        '三角函数': [
                            '角的概念与弧度制', '三角函数的定义', '诱导公式',
                            '三角函数的图像', '三角恒等式'
                        ]
                    },
                    '高二': {
                        '平面向量': [
                            '向量的概念', '向量的运算', '向量的坐标表示',
                            '向量的应用'
                        ],
                        '数列': [
                            '数列的概念', '等差数列', '等比数列',
                            '数列的极限'
                        ],
                        '立体几何': [
                            '空间几何体的特征', '空间点线面的位置关系',
                            '空间向量', '立体图形的度量'
                        ]
                    },
                    '高三': {
                        '解析几何': [
                            '直线方程', '圆的方程', '圆锥曲线',
                            '曲线的参数方程'
                        ],
                        '概率与统计': [
                            '计数原理', '概率的定义', '条件概率',
                            '正态分布'
                        ],
                        '微积分初步': [
                            '导数的概念', '导数的应用', '积分的概念',
                            '定积分的应用'
                        ]
                    }
                },
                college: {
                    '大一': {
                        '高等数学基础': [
                            '函数极限', '连续性', '导数与微分',
                            '积分学基础'
                        ],
                        '线性代数': [
                            '矩阵运算', '线性方程组', '向量空间',
                            '特征值与特征向量'
                        ]
                    },
                    '大二': {
                        '数学分析': [
                            '多元函数微分', '重积分', '曲线积分',
                            '曲面积分'
                        ],
                        '概率论': [
                            '随机变量', '概率分布', '大数定律',
                            '中心极限定理'
                        ]
                    },
                    '大三': {
                        '复变函数': [
                            '解析函数', '复积分', '留数理论',
                            '共形映射'
                        ],
                        '微分方程': [
                            '一阶方程', '高阶线性方程', '稳定性理论',
                            '数值解法'
                        ]
                    },
                    '大四': {
                        '泛函分析': [
                            '度量空间', '赋范空间', 'Hilbert空间',
                            '算子理论'
                        ],
                        '数值分析': [
                            '插值方法', '数值积分', '方程求根',
                            '最优化方法'
                        ]
                    }
                }
            }
        ;

        // 级联选择逻辑
        $('#level1').change(function() {
            const level1 = $(this).val();
            const level2 = $('#level2');
            level2.empty().append('<option value="">请选择年级</option>');
            $('#level4, #level5').empty().append('<option value="">请先选择上一级</option>').prop('disabled', true);
            
            if (level1) {
                Object.keys(cascadeData[level1]).forEach(grade => {
                    level2.append(`<option value="${grade}">${grade}</option>`);
                });
                level2.prop('disabled', false);
            }
        });

        $('#level2').change(function() {
            const level1 = $('#level1').val();
            const grade = $(this).val();
            const level4 = $('#level4');
            level4.empty().append('<option value="">请选择章节</option>');
            $('#level5').empty().append('<option value="">请先选择上一级</option>').prop('disabled', true);
            
            if (grade && cascadeData[level1][grade]) {
                Object.keys(cascadeData[level1][grade]).forEach(chapter => {
                    level4.append(`<option value="${chapter}">${chapter}</option>`);
                });
                level4.prop('disabled', false);
            }
        });

        $('#level4').change(function() {
            const level1 = $('#level1').val();
            const grade = $('#level2').val();
            const chapter = $(this).val();
            const level5 = $('#level5');
            level5.empty().append('<option value="">请选择知识点</option>');
            
            if (chapter && cascadeData[level1][grade][chapter]) {
                cascadeData[level1][grade][chapter].forEach(point => {
                    level5.append(`<option value="${point}">${point}</option>`);
                });
                level5.prop('disabled', false);
            }
        });

        // 图片上传处理
        let imageBase64 = null;
        
        $('#imageUpload').change(function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imageBase64 = e.target.result;
                    $('#previewImg').attr('src', imageBase64);
                    $('#imagePreview').removeClass('hidden');
                };
                reader.readAsDataURL(file);
            }
        });
        
        $('#removeImage').click(function() {
            $('#imageUpload').val('');
            imageBase64 = null;
            $('#imagePreview').addClass('hidden');
        });

        // 表单提交处理
        $('#questionForm').submit(function(e) {
            e.preventDefault();
            const level1 = $('#level1').val();
            const level2 = $('#level2').val();
            const level4 = $('#level4').val();
            const level5 = $('#level5').val();
            const originalQuestion = $('#question').val();

            if (!originalQuestion) {
                alert('请输入问题描述');
                return;
            }

            // 组合所有信息到问题字符串中
            const combinedQuestion = `学段：${level1 || '未选择'}\n年级：${level2 || '未选择'}\n章节：${level4 || '未选择'}\n知识点：${level5 || '未选择'}\n问题：${originalQuestion}`;

            $('.loading').show();
            $('#answerContainer').empty(); // 清空初始的八步解题法内容
            
            // 根据是否有图片选择不同的接口
            const endpoint = imageBase64 ? '/math_ask_with_image' : '/math_ask';
            const requestData = imageBase64 
                ? { question: combinedQuestion, image: imageBase64 }
                : { question: combinedQuestion };

            // 发送请求到后端
            fetch(endpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(requestData)
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        return { result: text };
                    });
                }
            })
            .then(data => {
                $('.loading').hide();
                if (data.error) {
                    $('#answerContainer').html(`<div class="text-red-500">${data.error}</div>`);
                } else {
                    $('#answerContainer').html(data.result);
                    console.log('Received data:', data);
                    // 确保MathJax正确渲染
                    if (typeof MathJax !== 'undefined') {
                        if (typeof MathJax.Hub !== 'undefined') {
                            // MathJax 2.x
                            MathJax.Hub.Queue(["Typeset", MathJax.Hub, "answerContainer"]);
                        } else if (typeof MathJax.typeset !== 'undefined') {
                            // MathJax 3.x
                            MathJax.typeset(["#answerContainer"]);
                        }
                    }
                }
            })
            .catch(error => {
                $('.loading').hide();
                $('#answerContainer').html(`<div class="text-red-500">请求失败: ${error}</div>`);
            });
        });
    </script>
</body>
</html>

<script>
    // 图形渲染辅助函数
    function renderMathGraphics() {
        
        const histogram = d3.bin()
            .value(d => d.value)  // Accessor function
            .thresholds(40);      // Number of bins or threshold values

        const bins = histogram(data);
        // 查找所有带有data-math-graphic属性的容器
        const graphicContainers = document.querySelectorAll('[data-math-graphic]');
        
        graphicContainers.forEach(container => {
            const graphicType = container.getAttribute('data-math-graphic');
            const graphicData = JSON.parse(container.getAttribute('data-graphic-data') || '{}');
            
            // 清空容器
            container.innerHTML = '';
            
            // 根据图形类型渲染
            switch(graphicType) {
                case 'triangle':
                    renderTriangle(container, graphicData);
                    break;
                case 'coordinate':
                    renderCoordinateSystem(container, graphicData);
                    break;
                case 'function':
                    renderFunctionGraph(container, graphicData);
                    break;
                // 可以添加更多图形类型
            }
        });
    }
    
    // 三角形渲染
    function renderTriangle(container, data) {
        const width = data.width || 300;
        const height = data.height || 300;
        const points = data.points || [[50, 250], [250, 250], [150, 50]];
        
        const svg = d3.select(container)
            .append('svg')
            .attr('width', width)
            .attr('height', height);
            
        // 绘制三角形
        svg.append('polygon')
            .attr('points', points.map(p => p.join(',')).join(' '))
            .attr('fill', 'none')
            .attr('stroke', 'blue')
            .attr('stroke-width', 2);
            
        // 标注角度和边长
        if (data.showLabels) {
            points.forEach((point, i) => {
                svg.append('text')
                    .attr('x', point[0])
                    .attr('y', point[1] - 10)
                    .text(data.labels?.[i] || String.fromCharCode(65 + i))
                    .attr('text-anchor', 'middle');
            });
        }
    }
    
    // 坐标系渲染
    function renderCoordinateSystem(container, data) {
        const width = data.width || 400;
        const height = data.height || 400;
        const margin = data.margin || 40;
        
        const svg = d3.select(container)
            .append('svg')
            .attr('width', width)
            .attr('height', height);
            
        // 绘制坐标轴
        const xScale = d3.scaleLinear()
            .domain([data.xMin || -10, data.xMax || 10])
            .range([margin, width - margin]);
            
        const yScale = d3.scaleLinear()
            .domain([data.yMin || -10, data.yMax || 10])
            .range([height - margin, margin]);
            
        // X轴
        svg.append('line')
            .attr('x1', margin)
            .attr('y1', height/2)
            .attr('x2', width - margin)
            .attr('y2', height/2)
            .attr('stroke', 'black');
            
        // Y轴
        svg.append('line')
            .attr('x1', width/2)
            .attr('y1', margin)
            .attr('x2', width/2)
            .attr('y2', height - margin)
            .attr('stroke', 'black');
            
        // 坐标轴标签
        svg.append('text')
            .attr('x', width - margin + 10)
            .attr('y', height/2 - 10)
            .text('x');
            
        svg.append('text')
            .attr('x', width/2 + 10)
            .attr('y', margin - 10)
            .text('y');
    }
    
    // 函数图像渲染
    function renderFunctionGraph(container, data) {
        const width = data.width || 400;
        const height = data.height || 400;
        const margin = data.margin || 40;
        
        const svg = d3.select(container)
            .append('svg')
            .attr('width', width)
            .attr('height', height);
            
        // 设置比例尺
        const xScale = d3.scaleLinear()
            .domain([data.xMin || -10, data.xMax || 10])
            .range([margin, width - margin]);
            
        const yScale = d3.scaleLinear()
            .domain([data.yMin || -10, data.yMax || 10])
            .range([height - margin, margin]);
            
        // 绘制坐标轴
        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScale);
        
        svg.append('g')
            .attr('transform', `translate(0, ${height/2})`)
            .call(xAxis);
            
        svg.append('g')
            .attr('transform', `translate(${width/2}, 0)`)
            .call(yAxis);
            
        // 绘制函数曲线
        if (data.functions && data.functions.length) {
            data.functions.forEach((func, index) => {
                const points = [];
                const step = (data.xMax - data.xMin) / 100;
                
                // 生成函数点
                for (let x = data.xMin; x <= data.xMax; x += step) {
                    try {
                        // 使用安全的方式计算函数值
                        const scope = {x: x};
                        const y = eval(func.replace(/x/g, 'scope.x'));
                        if (!isNaN(y) && isFinite(y)) {
                            points.push([x, y]);
                        }
                    } catch (e) {
                        console.error('函数计算错误:', e);
                    }
                }
                
                // 创建线生成器
                const line = d3.line()
                    .x(d => xScale(d[0]))
                    .y(d => yScale(d[1]));
                    
                // 绘制曲线
                svg.append('path')
                    .datum(points)
                    .attr('fill', 'none')
                    .attr('stroke', data.colors?.[index] || 'steelblue')
                    .attr('stroke-width', 1.5)
                    .attr('d', line);
            });
        }
    }
    
    // 在页面加载完成后初始化
    $(document).ready(function() {
        // 在接收到答案后渲染图形
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' && mutation.target.id === 'answerContainer') {
                    // 延迟执行以确保内容完全加载
                    setTimeout(renderMathGraphics, 500);
                }
            });
        });
        
        // 监听答案容器变化
        observer.observe(document.getElementById('answerContainer'), { childList: true });
    });

    // 在文档加载完成后执行
    $(document).ready(function() {
        console.log('文档加载完成');
    });
</script>
